<template>
  <div class="list" style="height:100%">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed=true
    />
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
    <ul>
      <li v-for="i in list" :key="i" @click="href(i.name)">
        <img :src="i.iocnurl" alt="">
        <p>{{i.name}}</p>
      </li>
    </ul>
    </van-list>
  </div>
</template>

<script>
// @ is an alias to /src
import { getList } from "../api/getList";
export default {
  name: "home",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 0,
      key:'',
      title:''
    };
  },

  methods: {
    href(name) {
      this.$router.push(`/detail?name=${name}&key=${this.key}`)
    },
    onLoad() {
      this.page++;
      getList(this.key, this.page).then(data => {
        console.log(data.data);
        // 异步更新数据
        setTimeout(() => {
          for (let i = 0; i < data.data.data.length; i++) {
            this.list.push(data.data.data[i]);
          }
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.list.length >= data.data.total) {
            this.finished = true;
          }
        }, 500);
      });
    }
  },
  components: {},
  mounted() {
    this.title = this.$router.history.current.query.title;
    this.key = this.$router.history.current.query.key;
  }
};
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: #ffffff;
  margin-top: 40px;
  li {
    width: 32%;
    img {
      width: 100%;
      height: 172px;
    }
    p {
      width: 100%;
      font-size: 13px;
      line-height: 20px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      margin-bottom: 10px;
    }
  }
}
</style>

